<template>
  <!-- 监理计量 -->
  <div class="supervisor-warp">
    <div class="title-wrap">
      <div class="title">
        <div class="dot"></div>
        监理计量
      </div>
      <div class="btn-amount">
        <div class="blue-number">
          <span>合同总金额</span>
          <span>{{ data.contractSum }}亿</span>
        </div>
        <div class="green-number">
          <span>累计计量</span>
          <span>{{ data.measureSum }}亿</span>
        </div>
      </div>
    </div>
    <!-- 多项目 -->
    <div class="content-wrap" id="supervisor-bar" style="overflow: hidden;" v-show="!projectId"></div>
    <!-- 单项目 -->
    <div class="content-wrap" v-show="projectId">
      <div class="supervisor-search">
        <el-radio-group v-model="data.activeName" style="width: 100%; overflow-x: auto">
          <el-radio-button :label="item.name" v-for="(item,index) in data.list" :key="'list'+index">{{ item.name }}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="supervisor-content">
        <div class="supervisor-progress">
          <el-progress type="dashboard" :width="150" :stroke-width="20" :percentage="activeContract.percent" color="#5EC738" define-back-color="#E3F3DD"></el-progress>
          <div class="supervisor-progress-text">完成百分比</div>
        </div>
        <div class="supervisor-number">
          <span>累计计量</span>
          <span>{{ activeContract.measureSum }}</span>
        </div>
        <div class="supervisor-number">
          <span>合同金额</span>
          <span>{{ activeContract.contractSum }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  name: 'supervisor',
  data() {
    return {
      supervisorBar: null
    };
  },

  props: {
    projectId: {
      type: String,
      default: '' // 空为多项目
    },
    data: {
      type: Object,
      default: {
        measureSum: 0,
        contractSum: 0,
        activeName: '',
        list: () => []
      }
    }
  },
  watch: {
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          if (val) {
            this.supervisorBar && this.supervisorBar.dispose();
            this.supervisorBar = null;
          }
          this.drawContent();
        });
      },
      immediate: true
    },
    data: {
      handler(val) {
        this.$nextTick(() => {
          this.drawContent();
        });
      },
      immediate: true
    }
  },

  computed: {
    activeContract() {
      const t = this.data.list.find(item => item.name === this.data.activeName);
      if (t) {
        let percent = (t.measureSum / t.contractSum) * 100;
        if (isNaN(percent)) {
          percent = 0;
        }
        percent = Number(percent.toFixed(2));
        return Object.assign({}, t, { percent });
      }
      return { contractSum: 0, measureSum: 0, percent: 0 };
    }
  },

  methods: {
    drawContent() {
      if (this.projectId) {
        if (this.data.list.length > 0) {
          this.data.activeName = this.data.list[0].name;
        }
        return;
      }

      let chartDom = document.getElementById('supervisor-bar');
      let myChart = echarts.init(chartDom);
      let option = {
        grid: {
          left: '4%',
          right: '4%',
          bottom: '4%',
          top: 30,
          containLabel: true //grid 区域是否包含坐标轴的刻度标签。
        },
        tooltip: {
          show: 'true',
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(108,128,151,0.3)'
            }
          },
          splitNumber: 5,
          name: '万元',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'right'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'black',

              }
            },
            axisLabel: {
              show: true,
              color: '#7C7C7C',
              rotate: 20,
              interval: 0
            },
            data: this.data.list.map(item => item.name)
          }
        ],
        series: [
          {
            name: '合同总金额',
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
              show: true,
              color: '#DAF3D1',
              // barBorderRadius:50,
              borderRadius: [8, 8, 0, 0]
            },
            // barGap: '13%',
            barWidth: 20,
            data: this.data.list.map(item => item.contractSum)
          },

          {
            name: '计量金额',
            type: 'bar',

            itemStyle: {
              show: true,
              color: 'rgba(94,199,56,1)',
              // barBorderRadius:50,
              borderRadius: [8, 8, 0, 0]
            },
            barWidth: 20,
            data: this.data.list.map(item => item.measureSum)
          }
        ]
      };
      this.supervisorBar = myChart;
      option && myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.supervisor-warp {
  width: 582px;
  height: 394px;
  margin-right: 24px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 15px;
  padding: 16px 24px 24px 24px;
}

.title-wrap {
  display: flex;
  height: 45px;
  border-bottom: 1px #e6e8ef solid;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  align-items: center;

  .title {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
    align-items: center;
    .dot {
      height: 4px;
      width: 4px;
      background-color: #005fff;
      border-radius: 4px;
      margin-right: 8px;
    }
  }

  .btn-amount {
    display: flex;
    flex-direction: row;
    color: #666666;
    font-size: 14px;
    cursor: pointer;
  }
}

.content-wrap {
  height: calc(100% - 55px);
  width: 100%;
  overflow-y: auto;
}

::v-deep .head-cell1 {
  background-color: #f3f8ff !important;
}

::v-deep .head-cell2 {
  background-color: #e8f0fc !important;
}

.blue-number,
.green-number {
  height: 32px;
  line-height: 32px;
  display: flex;
  justify-content: space-between;
  padding: 0 13px;
  font-size: 14px;
  border-radius: 5px;
  & > span:first-of-type {
    color: #000;
    margin-right: 20px;
  }
}

.blue-number {
  // background-color: rgba(57, 130, 250, 0.1);
  background-color: rgba(223, 42, 42, 0.05);
  border: 1px solid #df2a2a;

  margin-right: 11px;

  & > span:last-of-type {
    // color: #3982fa;
    color: #df2a2a;
  }
}

.green-number {
  // background-color: rgba(73, 178, 35, 0.05);
  background-color: rgba(73, 178, 35, 0.05);
  border: 1px solid #49b223;

  & > span:last-of-type {
    color: #429f21;
  }
}

.supervisor-search {
  height: 20%;
  margin-top: 10px;

  ::v-deep .el-radio-group {
    display: flex;
    flex-wrap: wrap;
    .el-radio-button {
      flex: 1;
      .el-radio-button__inner {
        width: 100%;
      }
    }
  }
}

.supervisor-content {
  height: calc(80% - 10px);
  width: 100%;
  display: flex;
  align-items: center;

  ::v-deep .supervisor-progress {
    margin-right: 20px;
    .supervisor-progress-text {
      text-align: center;
      color: #2c2c2c;
    }

    .el-progress__text {
      font-size: 42px;
      font-weight: bold;
      color: #2c2c2c;
    }
  }

  .supervisor-number {
    flex: 1;
    text-align: center;

    span {
      display: block;
    }

    &:last-of-type {
      & > span:first-of-type::before {
        background-color: #e3f3dd !important;
      }
    }

    & > span:first-of-type {
      color: #666666;
      margin-bottom: 10px;

      &::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: #5ec738;
        margin-right: 14px;
        vertical-align: middle;
      }
    }

    & > span:last-of-type {
      color: #2c2c2c;
      font-size: 28px;
      font-weight: bold;

      &::after {
        content: "万元";
        font-size: 16px;
        display: inline-block;
        margin-left: 5px;
        font-weight: normal;
        color: #000;
        vertical-align: middle;
      }
    }
  }
}
</style>
